<template>
  <div class="algo-detail">
    <detail class="algo-box">
    <h2 slot='detail-top' class="detail-top"><img src="~assets/images/分类小块@1x.png" alt=""> 关于AI FORCE</h2>
    <span slot="detail-left" class="detail-left">AI FORCE是一站式AI算法交易及产品化平台，致力于为互联网、智能家居、智慧零售、泛娱乐和安防等行业提供全栈赋能。</span>
    <span slot="detail-right" class="detail-right" ><span class="go" @click="toalgo">进入广场</span><img src="~assets/images/探索icon@1x.png" alt=""></span>
    </detail>
    <div class="algo-detail-bottom algo-box">
    <detail-item class="algo-detail-item">
<img src="~assets/images/Rectangle_594@1x.png" alt="" slot="detail-pic">
      <span slot="detail-ul">
        <span>一站式生态服务</span>
        <ul>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>智能家居</span></li>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>智能零售</span></li>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>泛娱乐</span></li>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>安全防护</span></li>
      </ul>
      </span>
    </detail-item>
    <detail-item class="algo-detail-item">
      <img src="~assets/images/Rectangle_595@1x.png" alt="" slot="detail-pic">
      <span slot="detail-ul">
        <span>拥有核心优势</span>
        <ul>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>资源丰富</span></li>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>价格低廉</span></li>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>技术支持</span></li>
        <li><img src="~assets/images/分类小圆点@1x.png"><span>安全可靠</span></li>
      </ul>
      </span>
    </detail-item>
    </div>
  </div>
</template>
<script>
import Detail from 'components/common/homepage/Detail.vue';
import DetailItem from 'components/common/homepage/DetailItem.vue'

export default {
  name:'AlgorithmDetail',
  components:{
    Detail,
    DetailItem
  },
  methods:{
    toalgo(){
      this.$router.push('/algorithm');
    }
  }
}
</script>

<style>
.algo-detail{
   height: 67.5rem;
  background-color: #18191F;
}
.algo-box{
  position: relative;
  top: 0;
  left:0;
  width: 50rem;
  height: 11.875rem;
  margin: 0 auto;
  padding-top: 8rem;
}
.algo-box h2{
  margin-bottom: 4rem;
}
.detail-top{
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.detail-top img{
  width: .875rem;
  height: 1.25rem;
  margin-right: .625rem;
}
.detail-left{
  font-size: 20px;
  text-align: left;
  width: 25rem;
  display: inline-block;
  margin-right: 12.5rem;
  color:#fff
}
.detail-right{
  cursor: pointer;
  position: absolute;
  bottom: -35%;
  right: 0;
  font-size: 18px;
  vertical-align: middle;
  display: inline-block;
  color:#fff;
  z-index: 10;
}
.detail-right img{
  vertical-align: middle;
  margin-left: .5rem;
}
.algo-detail-bottom{
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.algo-detail-bottom span{
  margin:20px;
  font-size: 21px;
}
.algo-detail-bottom ul{
  margin-top: 1.5rem;
  margin-right: 1rem;
}
.algo-detail-bottom ul li{
  padding-left: 22px;
  height: 2rem;
  vertical-align: middle;
}
.algo-detail-bottom ul li span{
  margin-left: 10px;
  font-size: 17px;
}
.algo-detail-item{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin-top: 30%;
}
</style>